<template>
  <div>
    <!-- 头部 -->
    <con-title :topTitle="topTitle"></con-title>

    <!-- 设备概览、监控、公告 -->
    <div class="gailan">
      <device-view class="gailan-l"></device-view>
      <div class="gailan-r">
        <!-- 公告 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title_card"
              >公告
              <span class="iconfont icon-askoutline"></span>
            </span>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
      </div>
    </div>

    <!-- 图表 -->
    <div class="sensor-echarts">
      <el-card class="box-card card-w">
        <div slot="header" class="clearfix">
          <span>空气湿度</span>
        </div>
        <div ref="chart1" class="chart">放图表信息</div>
      </el-card>
      <el-card class="box-card card-w">
        <div slot="header" class="clearfix">
          <span>光照</span>
        </div>
        <div ref="chart2" class="chart">放图表信息</div>
      </el-card>
      <el-card class="box-card card-w">
        <div slot="header" class="clearfix">
          <span>气压</span>
        </div>
        <div ref="chart3" class="chart">放图表信息</div>
      </el-card>
      <el-card class="box-card card-w">
        <div slot="header" class="clearfix">
          <span>土壤湿度</span>
        </div>
        <div ref="chart4" class="chart">放图表信息</div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入 api 接口
import { $sensorCount } from "@/api/index.js";
import DeviceView from "./components/Device.vue";
import ConTitle from "@/components/ConTitle.vue";
export default {
  name: "dashboardView",
  data() {
    return {
      topTitle: {
        type: "", //type如果有内容就会显示上一级
        text: "仪表盘",
        msg: "设备概览和传感数据可视化",
      },
    };
  },
  methods: {
    // 画图表
    draw(data) {
      console.log(data);
      // 图表初始化 线形图
      let chart1 = this.$echarts.init(this.$refs.chart1);
      let chart2 = this.$echarts.init(this.$refs.chart2);
      let chart3 = this.$echarts.init(this.$refs.chart3);
      let chart4 = this.$echarts.init(this.$refs.chart4);

      // 设置数据信息
      var option1 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.air,
            type: "line",
            smooth: true,
          },
        ],
      };
      var option2 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.beam,
            type: "bar",
          },
        ],
      };
      var option3 = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: data.pressure,
          },
        ],
      };
      var option4 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.soil,
            type: "line",
            smooth: true,
          },
        ],
      };

      //画图
      chart1.setOption(option1);
      chart2.setOption(option2);
      chart3.setOption(option3);
      chart4.setOption(option4);
    },
  },

  mounted() {
    $sensorCount().then((res) => {
      console.log(res);
      //画图
      this.draw(res.data.data);
    });
  },
  components: {
    DeviceView,
    ConTitle,
  },
};
</script>

<style lang="scss" scoped>
.sensor-echarts {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .card-w {
    width: 49.2%;
    margin-bottom: 10px;
  }
  .chart {
    height: 300px;
  }
}
.gailan-l {
  width: 80%;
  display: flex;
}
.title-bold {
  font-size: 20px;
  font-weight: bold;
}
.gailan {
  display: flex;
  margin-top: 10px;
}
.gailan-r {
  margin-left: 10px;
  width: 20%;
}

.header {
  margin: 10px;
}
.gailan {
  margin: 10px;
}
</style>